<template>
    <div class="app">
        <div
            v-loading="mapDataLoading"
            id="mapBox"
            :class="{ready:mapReady}"
            class="main-body-mapbox y_mapbox"

        ></div>
        <div class="allEvents">
            <div class="allTop">
                <div class="img"></div>
                <div class="allTitle">
                    <div class="title"><b>当日事件</b>实时统计</div>
                    <div class="eventsNum"><b>{{ eventsNum }}</b> 件</div>
                </div>
            </div>
            <div class="domTree">
                <div class="treeContent custom-shadow-names">
                    <el-tree class="treeList"
                         :data="videoList"
                         :props="defaultProps"
                         default-expand-all="true"
                         @node-click="handleNodeClick">
                    </el-tree>
                </div>
            </div>
        </div>
        <div class="videoBox">
            <div class="keyRoads">
                <div class="keyRoadsTitle">重点道路监控</div>
                <div class="videoContent">
                    <video src="../../../public/video/videoDemo.mp4" autoplay></video>
                    <video src="../../../public/video/videoDemo.mp4" autoplay></video>
                    <video src="../../../public/video/videoDemo.mp4" autoplay></video>
                    <video src="../../../public/video/videoDemo.mp4" autoplay></video>
                    <video src="../../../public/video/videoDemo.mp4" autoplay></video>
                    <video src="../../../public/video/videoDemo.mp4" autoplay></video>
                </div>
            </div>
            <div class="keyRoads">
                <div class="keyRoadsTitle">重点监控区域</div>
                <div class="videoContent">
                    <div class="v-bg">
                        <div class="v-content-box">
                            <div class="c-title">数据1</div>
                            <div class="c-num">123</div>
                        </div>
                    </div>
                    <div class="v-bg">
                        <div class="v-content-box">
                            <div class="c-title">数据1</div>
                            <div class="c-num">123</div>
                        </div>
                    </div>
                    <div class="v-bg">
                        <div class="v-content-box">
                            <div class="c-title">数据1</div>
                            <div class="c-num">123</div>
                        </div>
                    </div>
                    <div class="v-bg">
                        <div class="v-content-box">
                            <div class="c-title">数据1</div>
                            <div class="c-num">123</div>
                        </div>
                    </div>
                    <div class="v-bg">
                        <div class="v-content-box">
                            <div class="c-title">数据1</div>
                            <div class="c-num">123</div>
                        </div>
                    </div>
                    <div class="v-bg">
                        <div class="v-content-box">
                            <div class="c-title">数据1</div>
                            <div class="c-num">123</div>
                        </div>
                    </div>
                </div>
            </div>
<!--            <div class="keyRoads">-->
<!--                <div class="keyRoadsTitle">重点区域</div>-->
<!--                <div class="videoContent">-->
<!--                    <img src="../../../public/images/videoDemo.jpg" alt="">-->
<!--                    <img src="../../../public/images/videoDemo.jpg" alt="">-->
<!--                </div>-->
<!--            </div>-->

        </div>
    </div>
</template>

<script>
    var map;
    export default {
        name: "",
        data(){
            return{
                mapReady: false,
                mapDataLoading: false,
                listLoading: false,
                eventsNum: 225,
                videoList: [
                    {
                        label: "南法信镇",
                        children: [{
                            label: "南法信村",
                            children: [{
                                label: "村委会门口"
                            },{
                                label: "老韩库房西"
                            }]
                        },{
                            label: "刘家河村",
                            children: [{
                                label: "村委会门口"
                            },{
                                label: "4024北窑停车场向北"
                            },{
                                label: "老韩库房西"
                            }]
                        },{
                            label: "焦各庄村",
                            children: [{
                                label: "村委会门口"
                            },{
                                label: "益民药业"
                            },{
                                label: "4024北窑停车场向北"
                            }]
                        },{
                            label: "大江洼村",
                            children: [{
                                label: "村委会门口"
                            },{
                                label: "5019警务站人脸识别"
                            },{
                                label: "老韩库房西"
                            }]
                        },{
                            label: "北法信村",
                            children: [{
                                label: "村委会门口"
                            },{
                                label: "ND-C22双兴南区3号楼西侧"
                            },{
                                label: "益民药业"
                            }]
                        },{
                            label: "东海洪村",
                            children: [{
                                label: "村委会门口"
                            },{
                                label: "ND-C22双兴南区3号楼西侧"
                            },{
                                label: "老韩库房西"
                            }]
                        },{
                            label: "西海洪村",
                            children: [{
                                label: "村委会门口"
                            },{
                                label: "4024北窑停车场向北"
                            },{
                                label: "N-C83双兴南区29号楼东侧通道"
                            }]
                        },{
                            label: "东杜兰村",
                            children: [{
                                label: "村委会门口"
                            },{
                                label: "益民药业"
                            },{
                                label: "5019警务站人脸识别"
                            }]
                        },{
                            label: "西杜兰村",
                            children: [{
                                label: "村委会门口"
                            },{
                                label: "老韩库房西"
                            },{
                                label: "ND-C06 双兴南区20号楼南侧停车场东"
                            }]
                        },{
                            label: "三家店村",
                            children: [{
                                label: "村委会门口"
                            },{
                                label: "N-C11双兴南区22号楼南侧车棚2"
                            },{
                                label: "5019警务站人脸识别"
                            }]
                        },{
                            label: "南卷村",
                            children: [{
                                label: "村委会门口"
                            },{
                                label: "益民药业"
                            },{
                                label: "老韩库房西"
                            }]
                        }]
                    }
                ],
                defaultProps: {
                    children: "children",
                    label: "label"
                },
            }
        },
        mounted(){
            this.$nextTick(()=>{
                this.mapInit()
            })
        },
        methods: {
            mapInit() {
                const self = this;
                const AMap = window.AMap;
                map = new AMap.Map("mapBox", {
                    mapStyle: "amap://styles/a5f6e6bd157193151290059146ec5e9b", // 设置地图的显示样式
                    viewMode: "3D",
                    turboMode: true,
                    defaultCursor: "pointer",
                    showBuildingBlock: true,
                    expandZoomRange: true,
                    zooms: [3, 20],
                    zoom: 14,
                    pitch: 60,
                    center: [116.62592150459062,40.12052892354556],
                    forceVector: true
                });
                //3D控件
           /*     map.addControl(new AMap.ControlBar({
                    showZoomBar:false,
                    showControlButton:true,
                    position:{
                        left:'5px',
                        top:'120px'
                    }
                }))*/
                setTimeout(() => {
                    this.mapReady = true;
                }, 1000);
            },
            //点击左侧面板里的监督员
            handleNodeClick(data) {
                // this.activeMonitor = data;
                // this.removeMapMarkers();
                // this.addMarkerToMap(data);
                // this.map.panTo(data.position);
                // this.showMonitorDetail(data.id);
                console.log(data);
            },
        }
    }
</script>

<style scoped lang="less">
    @import "../../css/mixin.less";
    .app{
        width: 100%;
        height: calc(100vh - 4.65rem);
    }
    .y_mapbox{
        width: 100%;
        height: 100%;
    }
    .allEvents{
        position: fixed;
        left: 1rem;
        width: 20vw;
        height: 90%;
        z-index: 111;
        background-image: linear-gradient(to right, rgba(17, 17, 135, 0.9), rgba(17, 17, 135, 0.9), rgba(17, 17, 135, 0.9), rgba(17, 17, 135, 0));
    }
    .allTop{
        width: 100%;
        height: 15%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        background: url("../../../public/images/content-box1.png") no-repeat;
        background-size: 100% 100%;
    }
    .img{
        width: 64px;
        height: 64px;
        background: url("../../../public/images/allEvents.png");
    }
    .allTitle{
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        font-size: 16px;
        color: #84AEFC;
    }
    .allTitle div{
        display: flex;
        justify-content: center;
        width: 100%;
        padding: .2rem;
    }
    .eventsNum b{
        font-size: 28px;
        padding: 0 10px;
    }
    .domTree{
        width: 100%;
        height: 85%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url("../../../public/images/largebox-bgv.png") no-repeat;
        background-size: 100% 100%;
    }
    .treeContent{
        width: 90%;
        height: 90%;
        overflow-y: auto;
    }
    .videoBox{
        position: fixed;
        right: 1rem;
        width: 28vw;
        height: 90%;
        z-index: 111;
        background-image: linear-gradient(to left, rgba(17, 17, 135, 0.9), rgba(17, 17, 135, 0.9), rgba(17, 17, 135, 0.9), rgba(17, 17, 135, 0));
    }
    .keyRoads{
        width: 100%;
        /*height: 33%;*/
        //background: url("../../../public/images/zm-box2.png") no-repeat;
        background-size: 100% 100%;
    }
    .keyRoadsTitle{
        position: relative;
        left: 0;
        right: 0;
        width: 100%;
        /*text-align: center;*/
        top: 1.3rem;
        font-size: 1rem;
        color: #84AEFC;
    }
    .videoContent{
        width: 100%;
        height: 60%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        padding-top: 5%;
    }
    .videoContent video{
        width: 45%;
        height: 90%;
        margin: 1rem 1% 0;
    }
    .v-bg{
        width: calc(100% / 3);
        height: 5.9rem;
        background: url("../../../public/images/leftNumBg.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: .5rem 0;
    }
    .v-content-box{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        flex-wrap: wrap;
        font-size: 1rem;
    }
    .v-content-box div{
        width: 100%;
        text-align: center;
        color: #84AEFC;
    }


    .custom-shadow-names::-webkit-scrollbar {
        width: 0px;
    }

    .custom-shadow-names::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.2);
    }

    .custom-shadow-names::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: rgba(0, 0, 0, 0.1);
    }
</style>
